<template>
	<view style="padding: 0 34rpx;">
	<view class="container">
		<view class="header ">
			<view class="box">
				<label>充电桩型号</label>
				<text class="color">*</text>
			</view>
			<view class="u-input">
				<input type="text" placeholder="输入型号" maxlength="10" placeholder-style="color: #B1B1B1" />
			</view>
		</view>
		<view class="header ">
			<view class="box">
				<label>充电桩功率</label>
				<text class="color">*</text>
			</view>
			<view class="u-input">
				<input type="text" placeholder="****kW" maxlength="18" placeholder-style="color: #B1B1B1" />
			</view>
		</view>
		<view class="header ">
			<view class="box">
				<label>充电桩地址</label>
				<text class="color">*</text>
			</view>
			<view style="text-align: right;" class="u-input">
					<input type="text" placeholder="北京市朝阳区夕阳红街道"
					placeholder-style="color: #B1B1B1" 
					disabled=true
					/>
			<image style="width: 40rpx;
			 float: right;
			 margin-top: 35rpx ;" src="../../static/充电桩/right.png" mode="widthFix" ></image>
			</view>
		</view>
		<view class="header ">
			<view class="box">
				<label>详细地址</label>
				<text class="color">*</text>
			</view>
			<view class="u-input"
			style="text-align: left;">
				<input type="text" 
				placeholder="请填写充电桩的详细位置" 
				maxlength="11" 
				placeholder-style="color: #B1B1B1" />
			</view>
			
		</view>
		<view class="header">
			<view class="box">
				<label>相关照片</label>
			</view>
			<view style="text-align: left;" class="u-input">
					<input type="text" placeholder="(最多9张,单张照片小于2M)"
					placeholder-style="color: #B1B1B1" 
					disabled=true
					/>
			<image style="width: 40rpx;
			 float: right;
			 margin-top: 30rpx ;" src="../../static/充电桩/增加图片.png"
			  mode="widthFix"
			@click="chooseImg()"></image>
			</view>
		</view>
	
		<view class="header">
			<view class="box">
				<label>联系人</label>
				<text class="color">*</text>
			</view> 
		<view style="text-align: left;" class="u-input">
				<input type="text" :value="name" @input="theBlur"/>
		
		</view>
			

		</view>
		<view class="header ">
			<view class="box">
				<label>联系方式</label>
				<text class="color">*</text>
			</view>
			<view style="text-align: left;" class="u-input">
				<input type="text"  maxlength="8" placeholder-style="color: #B1B1B1" 
				/>
			
			</view>
		</view>
		<view>
		<checkbox-group style="text-align: center; margin-top: 33rpx; font-size: small;">
			<label>
			<checkbox value="cb" checked="true"  
			/>我已经阅读并同意 
			</label>
			<text style="color: #007AFF"
			@click="show = true">【发布须知】</text>
			
			</checkbox-group>
			
		</view>
	
	<view >
		<u-modal :show="show" 
		@confirm="confirm" 
		:title="title" 
		:content='content'
		:confirmText='confirmText'></u-modal>
		
	</view>
	</view>
		
	<view class="apply" @click="navigate('succed')">
				<view class="toapply">
					立即发布
				</view>
			</view>
		
	</view>

		
	
		
</template>

<script>

	export default {
			
		data() {
			return {	
				show: false,
				title:'【申请须知】',
				content:'xxxxxx',
				confirmText:'我知道了',
				imgArr:[]
			}
		},
		methods: {

				  confirm() {
				  			setTimeout(() => {
		
				  				this.show = false;
				  			}, 100)
				  		},
						navigate(path) {
							if (!path) return
							uni.navigateTo({
								url: `/pages/${path}/${path}`
							});
						},
						chooseImg(){
							uni.chooseImage({
								success:res=>{
									this.imgArr = res.tempFilePaths
									
								}
							})
						},
			
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		// width: 100%;
		height:100rpx;
		// padding: 0 32rpx;
		display: flex;
		flex-direction: row;

		.box {
			width: 180rpx;
			height: 100%;
			border-bottom: 1rpx solid #E4E4E4;
			line-height: 100rpx;

			label {
				font-size: 30rpx;
				font-weight: 400;
				color: #333333;
				line-height: 42px;
			}

			.color {
				color: #138eff;
			}
		}

		.u-input {
			display: flex;
			flex-direction: row;
			border-bottom: 1rpx solid #E4E4E4;
			color: #333333;
			flex:1;
			line-height: 100rpx;
			text-align: right;

			input {
				width: 100%;
				height: 100%;
			}

		}
	}


	.apply {
			// bottom:0;
			position: absolute;
			width: 100%;
			// margin-top: 100rpx;
			height: 90rpx;
			// padding: 0 33rpx;
			text-align: center;
			bottom: 0;
			margin-bottom: 20rpx;
	
			.toapply {
				width: 680rpx;
				height: 100%;
				background-color: green;
				line-height: 90rpx;
				background-color: #337DFF;
				font-size: 36prx;
				border-radius:10rpx;
				font-weight: 400;
				color: #FFFFFF;
				
			
			}
		}
</style>


